<template>
    <div class="course-video">
      <div class="video-list">
        <!-- 大标题部分 -->
        <div class="chapter" v-for="chapter in courseList" :key="chapter.id">
          <div class="chapter-title">{{ chapter.label }}</div>
          <!-- 小节部分 -->
          <div class="section" v-for="section in chapter.children" :key="section.id">
            <div class="section-content">
              <div class="section-info">
                <div class="section-title">{{ section.label }}</div>
                <div class="section-author" @click.stop="handleContentClick(section)">章节内容</div>
                <div class="section-author" @click.stop="handlePlanClick(section)">课时计划</div>
              </div>
            </div>
            <!-- 折叠面板 -->
            <transition name="collapse">
              <div class="collapse-wrapper" v-show="activeSection === section.id" ref="collapseWrapper">
                <div class="collapse-content" v-html="showContent">

                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import courseRelated from '@/api/courseRelated'
  export default {
    name: 'LessonPlan',
    props: {
      chapterTree: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        courseList: [],
        activeSection: null, // 当前展开的章节ID
        showContent: '', // 章节内容
        lastClickType: '' // 记录上次点击的是哪种类型按钮
      }
    },
    watch: {
      chapterTree: {
        handler(newVal) {
          if (newVal && newVal.length > 0) {
            // 过滤出有children的章节作为父章节，并为每个section添加必要的属性
            this.courseList = newVal.filter(item => item.children && item.children.length > 0).map(chapter => ({
              ...chapter,
              children: chapter.children.map(section => ({
                ...section,
                content: section.ccContent
              }))
            }));
          }
        },
        immediate: true
      }
    },
    methods: {
      handleContentClick(section) {
        // 如果点击的是相同章节的相同按钮类型，则切换折叠状态
        if (this.activeSection === section.id && this.lastClickType === 'content') {
          this.activeSection = null;
          this.lastClickType = '';
          return;
        }
        
        // 设置当前按钮类型
        this.lastClickType = 'content';
        
        courseRelated.getCourseChapterDetail(section.id).then((res)=>{
          if(res.data.ccContent==null){
            this.showContent = '暂无内容'
          }else{
            this.showContent = res.data.ccContent
          }
          // 展开该章节
          this.activeSection = section.id;
        })
      },
      handlePlanClick(section) {
        // 如果点击的是相同章节的相同按钮类型，则切换折叠状态
        if (this.activeSection === section.id && this.lastClickType === 'plan') {
          this.activeSection = null;
          this.lastClickType = '';
          return;
        }
        
        // 设置当前按钮类型
        this.lastClickType = 'plan';
        
        courseRelated.getCourseChapterDetail(section.id).then((res)=>{
          if(res.data.ccPlan==null){
            this.showContent = '暂无内容'
          }else{
            this.showContent = res.data.ccPlan
          }
          // 展开该章节
          this.activeSection = section.id;
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  // 添加折叠动画相关样式
  .collapse-enter-active,
  .collapse-leave-active {
    transition: all 0.3s ease-in-out;
    max-height: 300px; // 设置一个足够大的最大高度
  }
  
  .collapse-enter-from,
  .collapse-leave-to {
    max-height: 0;
    opacity: 0;
    margin: 0;
  }
  
  .course-video {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 20px;
  box-sizing: border-box;
    .video-list {
      .chapter {
        margin-bottom: 30px;
        
        .chapter-title {
          font-size: 20px;
          font-weight: bold;
          color: #333;
          padding: 10px 0;
          border-bottom: 2px solid #e8e8e8;
          margin-bottom: 15px;
        }
  
        .section {
          padding: 0 20px;
          
          .section-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            margin: 0 -20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.3s ease;
  
            &:hover {
              background-color: #fff;
              
              .play-btn {
                opacity: 1;
                transform: scale(1);
              }
            }
  
            .section-info {
              flex: 1;
              display: flex;
              align-items: center;
              gap: 40px;
              margin-right: 20px;
              font-family:'Alibaba PuHuiTi 3.0', 'Microsoft YaHei', sans-serif;
              .section-title {
                font-size: 16px;
                color: #333;
                flex: 1;
              }
  
              .section-author {
                width: 100px;
                text-align: center;
                color: #409eff;
                font-size: 14px;
                cursor: pointer;
              }
              .section-author:hover{
                color: #7061fd;
              }
            }
   
            .play-btn {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              background-color: #409EFF;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0.6;
              transform: scale(0.9);
              transition: all 0.3s ease;
   
              i {
                color: #fff;
                font-size: 16px;
              }
   
              &:hover {
                opacity: 1;
                transform: scale(1.1);
              }
            }
          }

          .collapse-wrapper {
            overflow: hidden;
            
            .collapse-content {
              padding: 5px 10px;
              background-color: #f8f9fa;
              border-radius: 4px;
              margin: 10px 0;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            }
          }
        }
      }
    }
  }
  </style> 